import styled from 'styled-components';
import type { TableArg } from './index';
import { HEIGHT_SIZE, MAX_COL, MAX_ROW, MIN_COL, MIN_ROW, WIDTH_SIZE } from './index';

const tableCell = require('../../../asset/table-cell.png');
const tableHead = require('../../../asset/table-head.png');
const tableCellActive = require('../../../asset/table-cell-active.png');
const tableHeadActive = require('../../../asset/table-head-active.png');


export const StyledCustomBoxWrap = styled.div`
  left: 200px;
  top: 20px;
  position: fixed;
  z-index: 10001;
`;

export const StyledTablePickerBox = styled.div`
  overflow: hidden;
  border: 1px solid #dfe1e5;
  padding: 6px;
  background-color: #fff;
  cursor: pointer;
  min-width: ${()=>MIN_ROW*WIDTH_SIZE}px;
  min-height: ${()=>MIN_COL*HEIGHT_SIZE+20}px;
  max-width: ${()=>MAX_ROW*WIDTH_SIZE}px;
  max-height: ${()=>MAX_COL*HEIGHT_SIZE+20}px;
`;

export const StyledTablePicker = styled.div`
  position: relative;
`;

export const StyledTableIndex = styled.span`
  overflow: hidden;
  font-size: 12px;
  display: block;
  text-align: center;
  font-weight: bold;
  width: 100%;
  margin: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 20px;
`;

const TableCell = styled.div`
    overflow: hidden;
    background-repeat: repeat;
    position: absolute;
`;

export const StyledTableCell = styled(TableCell)`
  min-width: ${()=>MIN_ROW*WIDTH_SIZE}px;
  min-height: ${()=>MIN_COL*HEIGHT_SIZE}px;
  background-image: url(${tableCell});
  min-width: ${()=>MIN_ROW*WIDTH_SIZE}px;
  min-height: ${()=>MIN_COL*HEIGHT_SIZE}px;
  max-width: ${()=>MAX_ROW*WIDTH_SIZE}px;
  max-height: ${()=>MAX_COL*HEIGHT_SIZE}px;
`;

export const StyledTableHead = styled(TableCell)`
  background-image: url(${tableHead});
  min-width: ${()=>MIN_ROW*WIDTH_SIZE}px;
  height: ${()=>HEIGHT_SIZE}px;
  max-width: ${()=>MAX_ROW*WIDTH_SIZE}px;
`;

export const StyledTableCellSelected = styled(TableCell)`
  background-image: url(${tableCellActive});
  opacity: 0.4;
  transition: all linear .1s;
`;

export const StyledTableHeadSelected = styled(TableCell)`
  background-image: url(${tableHeadActive});
`;

